<template>
  <div>
    <template v-for="(item, key) in data" :key="key">
      <div
        class="sub-menu"
        :style="subSideOpen(item) ? columnActiveOpenStyle : themeStyle"
        v-if="
          item.children && (item.hidden == undefined ? true : item.hidden ? false : true)
        "
        :title="item.meta && item.meta.title ? item.meta.title : ''"
      >
        <div
          class="menu-item"
          :style="activeMenu(item.path) ? activeThemeStyle : themeStyle"
          :title="item.meta && item.meta.title ? item.meta.title : ''"
        >
          <div
            class="menu-link"
            @click="routerLink(item, true)"
            :style="subSideOpen(item) ? routerOpenStyle : routerStyle"
            :to="item.path"
          >
            <div class="menu-link-main">
              <!-- 自定义菜单图标 -->
              <SvgIcon
                v-if="item.meta && item.meta.icon"
                class="svg-icon"
                :type="item.meta && item.meta.icon ? item.meta.icon : ''"
              />
              <span>{{ item.meta && item.meta.title ? item.meta.title : "" }}</span>
            </div>
            <div
              :class="subSideOpen(item) ? 'arrow-down' : 'arrow-right'"
              :style="subSideOpen(item) ? arrowDownStyle : arrowStyle"
            ></div>
          </div>
        </div>
        <Side
          v-show="subSideOpen(item)"
          :data="item.children"
          :option="option"
          :count="numbers"
          @itemClick="itemClick"
          @itemOpenClick="itemOpenClick"
        />
      </div>

      <div
        class="menu-item"
        v-if="
          !item.children && (item.hidden == undefined ? true : item.hidden ? false : true)
        "
        :style="activeMenu(item.path) ? activeThemeStyle : themeStyle"
        :title="item.meta && item.meta.title ? item.meta.title : ''"
      >
        <div
          class="menu-link"
          @click="routerLink(item, false)"
          :style="activeMenu(item.path) ? routerActiveStyle : routerStyle"
        >
          <div class="menu-link-main">
            <!-- 自定义菜单图标 -->
            <SvgIcon
              v-if="item.meta && item.meta.icon"
              class="svg-icon"
              :type="item.meta && item.meta.icon ? item.meta.icon : ''"
            />
            <span>{{ item.meta && item.meta.title ? item.meta.title : "" }}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  data: [Object, Array],
  option: Object,
  count: {
    type: Number,
    // 对象或数组默认值必须从一个工厂函数获取
    default: 1,
  },
});
const emit = defineEmits(["itemClick", "itemOpenClick"]);

const router = useRouter();
const numbers = ref(props.count ? props.count : 1);

const columnStyle = {
  minHeight: props.option.height + "px",
  lineHeight: props.option.height + "px",
  ...props.option.theme.menuColumnStyle,
};

const columnActiveStyle = props.option.theme.menuColumnActiveStyle;

const columnActiveOpenStyle = props.option.theme.menuColumnActiveOpenStyle;

const columnActiveOpenColor = columnActiveOpenStyle.color
  ? columnActiveOpenStyle.color
  : "#fff";

const menuColumnStyle = props.option.theme.menuColumnStyle;

const menuColumnColor = menuColumnStyle.color ? menuColumnStyle.color : "#fff";

const openKeys = ref(props.option.openKeys);

const selectedKey = ref(props.option.selectedKey);

const selected = ref({});

const themeStyle = ref(columnStyle);

const activeThemeStyle = ref({
  ...columnStyle,
  ...columnActiveStyle,
});

const routerStyle = ref({
  ...menuColumnStyle,
  paddingLeft: numbers.value * Number(props.option.interval) + "px",
});

const routerActiveStyle = ref({
  ...menuColumnStyle,
  ...columnActiveStyle,
  paddingLeft: numbers.value * Number(props.option.interval) + "px",
});

const routerOpenStyle = ref({
  ...menuColumnStyle,
  paddingLeft: numbers.value * Number(props.option.interval) + "px",
  ...columnActiveOpenStyle,
});

const arrowDownStyle = ref({
  borderColor: columnActiveOpenColor,
  marginRight: Number(props.option.interval) + 6 + "px",
});

const arrowStyle = ref({
  borderColor: menuColumnColor,
  marginRight: Number(props.option.interval) + 6 + "px",
});

numbers.value = numbers.value + 1;
watch(
  () => props.option.openKeys,
  (new_openKeys) => {
    openKeys.value = [new_openKeys];
  }
);
watch(
  () => props.option.selectedKey,
  (new_selectedKey) => {
    selectedKey.value = new_selectedKey;
  }
);
const in_array = (search, array) => {
  for (var i in array) {
    if (array[i] == search) {
      return true;
    }
  }
  return false;
};
const activeMenu = (path) => {
  return in_array(path, openKeys.value);
};
const itemMenuClick = (item, subMenu) => {
  if (subMenu) {
    var index = selectedKey.value.indexOf(item.path);
    if (index > -1) {
      selectedKey.value.splice(index, 1);
    } else {
      selectedKey.value.push(item.path);
    }
    emit("itemOpenClick", selectedKey.value);
    selected.value[item.path] = selected.value[item.path] ? false : true;
  } else {
    router.push({
      path: item.path,
      query: {},
    });
    emit("itemClick", item, subMenu);
  }
};
const itemOpenClick = (item_selectedKey) => {
  emit("itemOpenClick", item_selectedKey);
};
const subSideOpen = (subSideOpen) => {
  return in_array(subSideOpen.path, selectedKey.value);
};
const itemClick = (item, subMenu) => {
  itemMenuClick(item, subMenu);
};
const routerLink = (item, subMenu) => {
  itemMenuClick(item, subMenu);
};
</script>
<style scoped>
div {
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
}

.svg-icon {
  margin-right: 5px;
}

.menu-item {
  margin-bottom: 8px;
}

.menu-link {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
}

.menu-link-main {
  flex: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow-right,
.arrow-down {
  border-top: 2px solid;
  border-right: 2px solid;
  width: 6px;
  height: 6px;
}

.arrow-right {
  -webkit-transform: rotate(45deg) translateX(-2.5px);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: rotate(45deg) translateX(-2.5px);
}

.arrow-down {
  -webkit-transform: rotate(45deg) translateX(-2.5px);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: rotate(135deg) translateX(-2.5px);
}
</style>
